<template>
<el-container>
  <el-main>
      <el-row :gutter="10">
          <el-col :span="1" style="border:1px solid rgba(255, 255, 255, 0.2)">
             
          </el-col>
          <el-col :span="16" >
                <el-card class="box-card" style="box-shadow:0 -2px 3px -1px #409EFF">
                    <div slot="header" class="clearfix">
                        <span style="color:#409EFF">文章</span>
                        <el-button style="float: right; padding: 3px 0" type="text">共31篇</el-button>
                    </div>
                    <el-row :gutter="12">
                        <el-col :span="24">
                            <el-row :gutter="10">
                                <el-col :span="16">
                                    <el-row :gutter="10">
                                        <el-col :span="24">
                                            <span style="font-weight:800">Vue入门</span>
                                        </el-col>
                                    </el-row>
                                    <el-row :gutter="10" class="content-margin">
                                        <el-col :span="24" style="color: #606266;font-size: 15px;font-family: Helvetica Neue;">
                                            Vue 是一套用于构建用户界面的渐进式框架。
                                            与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。
                                            Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
                                            另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
                                        </el-col>
                                    </el-row>
                                </el-col>
                                <el-col :span="8">
                                    <el-card  shadow="hover" :body-style="{ padding: '0px',height: '140px'}">
                                        <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
                                    </el-card>
                                    
                                </el-col>
                            </el-row>
                            <el-row :gutter="10" class="content-margin" style="display: flex;  align-items: center;font-size: 12px; color: #909399">
                                <el-col :span="16">
                                    <el-row :gutter="12" style="display: flex; align-items: center;">
                                        <el-col :span="4" class="col-d">
                                            <el-avatar size="small"> 
                                                <i class="el-icon-user-solid"></i>
                                            </el-avatar>
                                            <el-button type="text">wn</el-button>
                                        </el-col>
                                        <el-col :span="8"  class="col-d">
                                            <i class="el-icon-date"></i>
                                            <span class="demonstration"> 2021/5/12 12:00:00</span>
                                        </el-col>
                                        <el-col :span="6"  class="col-d">
                                            <span class="demonstration">浏览(278)</span>
                                        </el-col>
                                        <el-col :span="6"  class="col-d">
                                            <span class="demonstration">评论(3)</span>
                                        </el-col> 
                                    </el-row>
                                </el-col>
                                <el-col :span="8">
                                    <el-row :gutter="12">
                                        <el-col :span="24" style="    display: flex;justify-content: flex-end;">
                                            <span class="demonstration">阅读全文>></span>
                                        </el-col>                                        
                                    </el-row>
                                </el-col>
                                </el-row>
                        </el-col>
                    </el-row>
                    
                    <el-divider></el-divider>
 
                    <el-row :gutter="12">
                        <el-col :span="24">
                            <el-row :gutter="10">
                                <el-col :span="16">
                                    <el-row :gutter="10">
                                        <el-col :span="24">
                                            <span style="font-weight:800">Vue入门</span>
                                        </el-col>
                                    </el-row>
                                    <el-row :gutter="10" class="content-margin">
                                       <el-col :span="24" style="color: #606266;font-size: 15px;font-family: Helvetica Neue;">
                                            Vue 是一套用于构建用户界面的渐进式框架。
                                            与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。
                                            Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
                                            另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
                                        </el-col>
                                    </el-row>
                                </el-col>
                                <el-col :span="8">
                                    <el-card  shadow="hover" :body-style="{ padding: '0px',height: '140px'}">
                                        <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
                                    </el-card>
                                    
                                </el-col>
                            </el-row>
                            <el-row :gutter="10" class="content-margin" style="display: flex;  align-items: center;font-size: 12px; color: #909399">
                                <el-col :span="16">
                                    <el-row :gutter="12" style="display: flex; align-items: center;">
                                        <el-col :span="4" class="col-d">
                                            <el-avatar size="small"> 
                                                <i class="el-icon-user-solid"></i>
                                            </el-avatar>
                                            <el-button type="text">wn</el-button>
                                        </el-col>
                                        <el-col :span="8"  class="col-d">
                                            <i class="el-icon-date"></i>
                                            <span class="demonstration"> 2021/5/12 12:00:00</span>
                                        </el-col>
                                        <el-col :span="6"  class="col-d">
                                            <span class="demonstration">浏览(278)</span>
                                        </el-col>
                                        <el-col :span="6"  class="col-d">
                                            <span class="demonstration">评论(3)</span>
                                        </el-col> 
                                    </el-row>
                                </el-col>
                                <el-col :span="8">
                                    <el-row :gutter="12">
                                        <el-col :span="24" style="    display: flex;justify-content: flex-end;">
                                            <span class="demonstration">阅读全文>></span>
                                        </el-col>                                        
                                    </el-row>
                                </el-col>
                                </el-row>
                        </el-col>
                    </el-row>

                    <el-divider></el-divider>

                    <el-row :gutter="12">
                        <el-col :span="24">
                            <el-row :gutter="10">
                                <el-col :span="16">
                                    <el-row :gutter="10">
                                        <el-col :span="24">
                                            <span style="font-weight:800">Vue入门</span>
                                        </el-col>
                                    </el-row>
                                    <el-row :gutter="10" class="content-margin">
                                        <el-col :span="24" style="color: #606266;font-size: 15px;    font-family: Helvetica Neue;">
                                            Vue 是一套用于构建用户界面的渐进式框架。
                                            与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。
                                            Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
                                            另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
                                        </el-col>
                                    </el-row>
                                </el-col>
                                <el-col :span="8">
                                    <el-card  shadow="hover" :body-style="{ padding: '0px',height: '140px'}">
                                        <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
                                    </el-card>
                                    
                                </el-col>
                            </el-row>
                            <el-row :gutter="10" class="content-margin" style="display: flex;  align-items: center;font-size: 12px; color: #909399">
                                <el-col :span="16">
                                    <el-row :gutter="12" style="display: flex; align-items: center;">
                                        <el-col :span="4" class="col-d">
                                            <el-avatar size="small"> 
                                                <i class="el-icon-user-solid"></i>
                                            </el-avatar>
                                            <el-button type="text">wn</el-button>
                                        </el-col>
                                        <el-col :span="8"  class="col-d">
                                            <i class="el-icon-date"></i>
                                            <span class="demonstration"> 2021/5/12 12:00:00</span>
                                        </el-col>
                                        <el-col :span="6"  class="col-d">
                                            <span class="demonstration">浏览(278)</span>
                                        </el-col>
                                        <el-col :span="6"  class="col-d">
                                            <span class="demonstration">评论(3)</span>
                                        </el-col> 
                                    </el-row>
                                </el-col>
                                <el-col :span="8">
                                    <el-row :gutter="12">
                                        <el-col :span="24" style="    display: flex;justify-content: flex-end;">
                                            <span class="demonstration">阅读全文>></span>
                                        </el-col>                                        
                                    </el-row>
                                </el-col>
                                </el-row>
                        </el-col>
                    </el-row>

                    <el-divider></el-divider>

                    <el-row :gutter="12">
                        <el-col :span="24">
                            <el-row :gutter="10">
                                <el-col :span="16">
                                    <el-row :gutter="10">
                                        <el-col :span="24">
                                            <span style="font-weight:800">Vue入门</span>
                                        </el-col>
                                    </el-row>
                                    <el-row :gutter="10" class="content-margin">
                                        <el-col :span="24" style="color: #606266;font-size: 15px;font-family: Helvetica Neue;">
                                            Vue 是一套用于构建用户界面的渐进式框架。
                                            与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。
                                            Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
                                            另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
                                        </el-col>
                                    </el-row>
                                </el-col>
                                <el-col :span="8">
                                    <el-card  shadow="hover" :body-style="{ padding: '0px',height: '140px'}">
                                        <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
                                    </el-card>
                                    
                                </el-col>
                            </el-row>
                            <el-row :gutter="10" class="content-margin" style="display: flex;  align-items: center;font-size: 12px; color: #909399">
                                <el-col :span="16">
                                    <el-row :gutter="12" style="display: flex; align-items: center;">
                                        <el-col :span="4" class="col-d">
                                            <el-avatar size="small"> 
                                                <i class="el-icon-user-solid"></i>
                                            </el-avatar>
                                            <el-button type="text">wn</el-button>
                                        </el-col>
                                        <el-col :span="8"  class="col-d">
                                            <i class="el-icon-date"></i>
                                            <span class="demonstration"> 2021/5/12 12:00:00</span>
                                        </el-col>
                                        <el-col :span="6"  class="col-d">
                                            <span class="demonstration">浏览(278)</span>
                                        </el-col>
                                        <el-col :span="6"  class="col-d">
                                            <span class="demonstration">评论(3)</span>
                                        </el-col> 
                                    </el-row>
                                </el-col>
                                <el-col :span="8">
                                    <el-row :gutter="12">
                                        <el-col :span="24" style="    display: flex;justify-content: flex-end;">
                                            <span class="demonstration">阅读全文>></span>
                                        </el-col>                                        
                                    </el-row>
                                </el-col>
                                </el-row>
                        </el-col>
                    </el-row>

                    <el-divider></el-divider>

                    <el-row :gutter="12">
                        <el-col :span="24">
                            <el-row :gutter="10">
                                <el-col :span="4">
                                    <el-button>上一页</el-button>
                                </el-col>
                                <el-col :span="16">
                                    <el-pagination
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page.sync="currentPage3"
                                    :page-size="100"
                                    layout="prev, pager, next, jumper"
                                    :total="1000">
                                    </el-pagination>
                                    
                                </el-col>
                                <el-col :span="4">
                                     <el-button>下一页</el-button>
                                </el-col>
                            </el-row>

                        </el-col>
                    </el-row>    


                </el-card>               
          </el-col>
          <el-col :span="6">
              <el-row :gutter="12">
                  <el-col :span="24">
                        <el-card class="box-card" style="box-shadow:0 -2px 3px -1px #409EFF">
                            <div slot="header" class="clearfix">
                                <span style="color:#409EFF">分类</span>
                                <el-button style="float: right; padding: 3px 0" type="text">more</el-button>
                            </div>
                            <div class="text item">
                                <el-card class="box-card">
                                    <el-row :gutter="10">
                                        <el-col :span="24" style="padding:0px;font-size: 14px;">
                                            <span>java框架</span>
                                        </el-col>
                                    </el-row>

                                    <div style="height:1px;width:100%;background-color: #DCDFE6;margin-top:10px;margin-bottom:10px"></div>

                                    <el-row :gutter="10">                                        
                                         <el-col :span="24" style="padding:0px;font-size: 14px;">
                                            <span>数据库</span>
                                        </el-col>
                                    </el-row>

                                    <div style="height:1px;width:100%;background-color: #DCDFE6;margin-top:10px;margin-bottom:10px"></div>
                                    
                                    <el-row :gutter="10">                                        
                                         <el-col :span="24" style="padding:0px;font-size: 14px;">
                                            <span>nginx</span>
                                        </el-col>
                                    </el-row>

                                </el-card>
                            </div>
                        </el-card>  
                  </el-col>
              </el-row>
              <el-row :gutter="12" class="tag-right">
                  <el-col :span="24">
                       <el-card class="box-card" style="box-shadow:0 -2px 3px -1px #409EFF">
                            <div slot="header" class="clearfix">
                                <span style="color:#409EFF">标签云</span>
                                <el-button style="float: right; padding: 3px 0" type="text">more</el-button>
                            </div>
                            <div class="text item">                               
                                <el-tag type="success" style="margin-top:3px">mybatis</el-tag>
                                <el-tag type="info" style="margin-top:3px">java</el-tag>
                                <el-tag type="warning" style="margin-top:3px">redis</el-tag>
                                <el-tag type="danger" style="margin-top:3px">es</el-tag>
                                <el-tag style="margin-top:3px">vue</el-tag>
                                <el-tag type="success" style="margin-top:3px">spring</el-tag>
                                <el-tag type="info" style="margin-top:3px">springboot</el-tag>
                                <el-tag type="warning" style="margin-top:3px">springcloud</el-tag>
                                <el-tag type="danger" style="margin-top:3px">postgis</el-tag>
                            </div>
                        </el-card>                        
                  </el-col>
              </el-row>
              <el-row :gutter="12" class="tag-right">
                  <el-col :span="24">
                       <el-card class="box-card" style="box-shadow:0 -2px 3px -1px #409EFF">
                            <div slot="header" class="clearfix">
                                <span style="color:#409EFF">点击排行</span>
                            </div>
                            <div class="text item">
                                <el-row :gutter="10">
                                    <el-col :span="24">
                                        <span>Vue入门</span>
                                    </el-col>
                                </el-row>

                                <div style="height:1px;width:100%;background-color: #DCDFE6;margin-top:10px;margin-bottom:10px"></div>
                                
                                <el-row :gutter="10">
                                    <el-col :span="24">
                                    <span>ES6</span>
                                    </el-col>
                                </el-row>

                                <div style="height:1px;width:100%;background-color: #DCDFE6;margin-top:10px;margin-bottom:10px"></div>

                                <el-row :gutter="10">
                                    <el-col :span="24">
                                        <span>RabbitMQ</span>
                                    </el-col>
                                </el-row>

                                <div style="height:1px;width:100%;background-color: #DCDFE6;margin-top:10px;margin-bottom:10px"></div>

                                <el-row :gutter="10">
                                    <el-col :span="24">
                                        <span>Thymeleaf</span>
                                    </el-col>
                                </el-row>

                                <div style="height:1px;width:100%;background-color: #DCDFE6;margin-top:10px;margin-bottom:10px"></div>

                                <el-row :gutter="10">
                                    <el-col :span="24">
                                        <span>ElasticSearch</span>
                                    </el-col>
                                </el-row>

                                <div style="height:1px;width:100%;background-color: #DCDFE6;margin-top:10px;margin-bottom:10px"></div>

                                <el-row :gutter="10">
                                    <el-col :span="24">
                                        <span>Canal</span>
                                    </el-col>
                                </el-row>
                                <div style="height:1px;width:100%;background-color: #DCDFE6;margin-top:10px;margin-bottom:10px"></div>

                            </div>
                        </el-card>                        
                  </el-col>
              </el-row> 
              <el-row :gutter="12" class="tag-right">
                  <el-col :span="24">
                       <el-card class="box-card" style="box-shadow:0 -2px 3px -1px #409EFF">
                            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                                <el-tab-pane label="近期文章" name="first">
                                    <el-row :gutter="10">
                                        <el-col :span="24">
                                            <span>Vue入门</span>
                                        </el-col>
                                    </el-row>
                                    <div style="height:1px;width:100%;background-color: #DCDFE6;margin-top:10px;margin-bottom:10px"></div>                                        
                                    <el-row :gutter="10">
                                        <el-col :span="24">
                                        <span>ES6</span> 
                                        </el-col>
                                    </el-row>
                                </el-tab-pane>
                                <el-tab-pane>
                                     <span slot="label"><i class="el-icon-date"></i> 博主推荐</span>
                                    <el-row :gutter="10">
                                        <el-col :span="24">
                                            <span>RabbitMQ</span>
                                        </el-col>
                                    </el-row>

                                    <div style="height:1px;width:100%;background-color: #DCDFE6;margin-top:10px;margin-bottom:10px"></div>

                                    <el-row :gutter="10">
                                        <el-col :span="24">
                                            <span>Thymeleaf</span>
                                        </el-col>
                                    </el-row>
                                </el-tab-pane>
                                <el-tab-pane label="随机文章" name="third">
                                    <el-row :gutter="10">
                                        <el-col :span="24">
                                            <span>ElasticSearch</span>
                                        </el-col>
                                    </el-row>

                                    <div style="height:1px;width:100%;background-color: #DCDFE6;margin-top:10px;margin-bottom:10px"></div>

                                    <el-row :gutter="10">
                                        <el-col :span="24">
                                            <span>Canal</span>
                                        </el-col>
                                    </el-row>
                                    <div style="height:1px;width:100%;background-color: #DCDFE6;margin-top:10px;margin-bottom:10px"></div>

                                </el-tab-pane>
                            </el-tabs>
                        </el-card>                        
                  </el-col>
              </el-row>                      
          </el-col>
          <el-col :span="1" style="border:1px solid rgba(255, 255, 255, 0.2)">
              
              
          </el-col>
      </el-row>

  </el-main>
</el-container>

</template>
<script>
export default{
    name:'Home',
    data(){
        return{
            currentPage3:5,
            activeName: 'first'

        }
    },
    methods:{
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        handleClick(tab, event) {
            console.log(tab, event);
        }
    }
}
</script>
<style scoped>
  
.el-main {
    /* background-color: #E9EEF3; */
    background-color:rgba(255, 255, 255, 0.2);
    color: #333;
    /* text-align: center; */
    /* line-height: 160px; */
}

.content-margin{
    margin-top:10px;
}
.col-d{
    display: flex;
    align-items: center;
    justify-content: end;
}
.image {
    width: 100%;
    display: block;
}
.tag-right{
    margin-top: 10px;
}
.el-card{
    background-color:rgba(255, 255, 255, 0.5);
}
.el-card__body {
padding: 20px;
font-size: 14px;
}
</style>